<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="js/vue.js"></script>
    <!-- 异步调用axios,封装底层ajax -->
    <script src="js/axios.js"></script>
    <!-- 引入elementUI的css和js ,element基于vue-->
    <link rel="stylesheet" href="css/eleui.css">
    <script src="js/eleui.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="点hello" @click="getHello()">
    <input type="button" value="点User" @click="getUser()">
    <input type="button" value="点Emp" @click="getEmpById()">
    <input type="button" value="点Wang" @click="getWang()">
    <input type="button" value="查询所有" @click="getAllEmp()">
    <!-- 插值表达式 -->
    <h1>{{msg}}</h1>
    <ul>
        <li v-for="(value,key) in obj">
            {{key}}----{{value}}
        </li>
    </ul>
    <ul>
        <li v-for="(value,key) in emps">
            {{key}}----{{value}}
        </li>
    </ul>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="userName"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="userAge"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="userSex"
                label="性别">
        </el-table-column>
    </el-table>

    <el-table
            :data="empTableData"
            style="width: 100%">
        <el-table-column
                prop="empName"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="empAge"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="empSex"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="empSalary"
                label="修改时间">
        </el-table-column>
    </el-table>

    {{ empObj }}
    <h1>{{wang}}</h1>
    <!--查询所有-->
    <el-table
            :data="empList"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="empName"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="empAge"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="empSex"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="empSalary"
                label="修改时间">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="empSalary"
                label="工资">
        </el-table-column>
    </el-table>
</div>
</body>
</html>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "",
            obj: null,
            tableData: [],
            empObj: null,
            empTableData: [],
            wang: null,
            emps: null,
            empList: []
        },
        methods: {
            getHello: function () {
                var Axios = axios.create();//用来创建axios对象
                Axios.get("/hello").then(function (response) {
                    var res = response.data;
                    //如果res.success值为0证明返回成功
                    if (res.success === 0) {
                        //将后台返回值绑定到data中的msg属性
                        vue.msg = res.message;
                    }
                })
            },
            getUser: function () {
                var Axios = axios.create();
                Axios.get("/user").then(function (response) {
                    var res = response.data;
                    if (res.success === 0) {
                        vue.obj = res.data;
                        vue.tableData.push(vue.obj)
                    }
                })
            },
            getEmpById: function () {
                var Axios = axios.create();
                Axios.get("/getEmpById?id=" + 1).then(function (response) {
                    var resp = response.data;
                    if (resp.success === 0) {
                        vue.empObj = resp.data;
                        vue.empTableData.push(vue.empObj)
                    }
                })
            },
            getWang: function () {
                var Axios = axios.create();
                Axios.get("/wang").then(function (response) {
                    var wan = response.data;
                    if (wan.success === 0) {
                        vue.wang = wan.data;
                    }
                })
            },

            getAllEmp: function () {
                var Axios = axios.create();
                Axios.get("/getAll").then(function (response) {
                    var all = response.data;
                    if (all.success === 0) {
                        vue.emps = all.data;
                        vue.empList = vue.emps
                    }
                })
            }
        }
    });
</script>